import { getGoodsListAll } from '@/src/api/Goods';
import React, { useEffect, useRef, useState } from 'react';
import {
  ActivityIndicator,
  FlatList,
  Image,
  StyleSheet,
  Text,
  View,
} from 'react-native';

interface GoodsItemProps {
  id: number;
  price: number;
  name: string;
  picture: string;
}
export default function GoodsProduct() {
  // [list是状态变量,setList是修改状态变量的方法]
  const [list, setList] = useState<GoodsItemProps[]>([]); // 商品列表
  const [page, setPage] = useState(1); // 当前页码
  const [pageSize] = useState(10); // 每页数量固定
  const [loading, setLoading] = useState(false); // 是否正在加载状态
  const [hasMore, setHasMore] = useState(true); // 是否还有更多数据
  const isDebounce = useRef(false); // 防止重复触发加载变量

  // 加载商品列表（分页）
  const loadGetGoodsListAll = async (page: number, pageSize: number) => {
    // 如果正在加载和没有更多数据时return回去
    if (loading || !hasMore) return;
    setLoading(true); // 正在加载状态
    try {
      const result = await getGoodsListAll({ page, pageSize });
      console.log('getGoodsListAll----->', result);
      // 判断是否还有更多
      if (result.data.rows.length < pageSize) {
        setHasMore(false);
      }
      setList((prev) =>
        // 如果page===1则返回新数组，否则返回原数组
        page === 1 ? [...result.data.rows] : [...prev, ...result.data.rows]
      );
      // console.log('list----->39', list);
    } catch (error) {
      console.log('加载商品列表失败----->41', error);
      // API错误时回退页码（可选）
      if (page > 1) {
        setPage((prev) => prev - 1);
        isDebounce.current = false; // 请求完成后释放锁
      }
    } finally {
      setLoading(false);
    }
  };

  // 副作用来实现触发异步请求
  useEffect(() => {
    loadGetGoodsListAll(page, pageSize); // 把page, pageSize作为参数传入，默认加载第一页
  }, []); // 页面加载都会触发监听page, pageSize变化

  // 滑动到底加载下一页
  const handleLoadMore = () => {
    // 如果正在加载、没有更多数据或正在刷新，则返回
    if (loading || !hasMore || isDebounce.current) return;
    isDebounce.current = true;
    // 当前页码加一
    setPage((prev) => prev + 1);
    setTimeout(() => {
      isDebounce.current = false;
    }, 500); // 防止短时间内重复触发
  };
  // 底部加载中或无更多
  const renderFooter = () => {
    if (!hasMore) {
      return (
        <View style={styles.footer}>
          <Text>没有更多了</Text>
        </View>
      );
    }
    // 正在加载中显示加载动画
    return loading ? (
      <View style={styles.footer}>
        <ActivityIndicator size="small" color="#999" />
        <Text>加载中...</Text>
      </View>
    ) : null;
  };
  // 渲染列表项
  const GoodsItem = ({ name, price, picture }: GoodsItemProps) => {
    return (
      <View style={styles.goodsProductList}>
        <Image style={styles.img} source={{ uri: picture }}></Image>
        <Text style={styles.text}>{name}</Text>
        <View>￥{price}</View>
      </View>
    );
  };
  return (
    <View style={styles.goodsProduct}>
      <FlatList
        data={list} // 数据源
        keyExtractor={(item) => String(item.id)} // 规定字符串ID
        renderItem={({ item }) => (
          <GoodsItem
            name={item.name}
            id={item.id}
            price={item.price}
            picture={item.picture}
          ></GoodsItem>
        )}
        onEndReached={handleLoadMore} // 上拉加载更多
        onEndReachedThreshold={0.1} // 距离底部 10% 时才触发加载
        ListFooterComponent={renderFooter} // 显示没有加载更多
        numColumns={2} // 指定一行显示2个
        // 每个商品的高度，计算偏移量
        getItemLayout={(data, index) => ({
          length: 170,
          offset: 170 * index,
          index,
        })}
      ></FlatList>
    </View>
  );
}

const styles = StyleSheet.create({
  goodsProduct: {
    padding: 8,
    backgroundColor: '#f9f6f0',
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
  },
  goodsProductList: {
    backgroundColor: '#00ffff',
    width: '49%',
    textAlign: 'center',
    marginRight: 5,
    marginBottom: 5,
  },
  text: {
    paddingTop: 5,
    paddingBottom: 3,
  },
  img: {
    margin: 'auto',
    width: 150,
    height: 150,
  },
  footer: {
    padding: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
